<template>
	
	<div class="layui-form-item">
		<label class="layui-form-label" v-if="title">{{title}}</label>
		<div class="layui-input-block" :style="{'margin-left':title?'140px' :'0'}">
			<view class="layui-form-select" :class="showPanel ? 'layui-form-selected' : ''" @blur="showPanel = false" >
				
				<div class="layui-select-title" @click="togglePanel">
					<block v-if="showPanel == false && valueList.length == 0">
						<input type="text" :focus="showPanel" @input="toSearch" @confirm="confirmed" placeholder="请选择" class="layui-input">
					</block>
					<block v-if="!showPanel && valueList.length > 0">
						<input :disabled="true" :value="currentTitle" type="text" class="layui-input">
					</block>
					<block v-if="showPanel">
						<input type="text" :focus="showPanel" @input="toSearch" @confirm="confirmed" :placeholder="showPanel == false ?'请选择':placeholder" class="layui-input">
					</block>
					<i class="layui-edge"></i>
				</div>
				
				<dl class="layui-anim layui-anim-upbit" style="" v-if="showPanel" >
					
					<dd  v-if="selfList.length == 0">
						<div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary" >
							<span>{{emptyTip}}</span>
							<view class="desc">no options</view>
							<i class="layui-icon layui-icon-ok"></i>
						</div>
					</dd>
					
					<dd v-for="( item , index) in selfList" :key="index" @click="choose(index)" v-if="item.isShow && item.checked && selfList.length >= 20">
						<div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary">
							<span>{{item.title}}</span>
							<view class="desc">{{item.desc}}</view>
							<i class="layui-icon layui-icon-ok"></i>
						</div>
					</dd>
					
					<dd v-for="( item , index) in selfList" :key="index" @click="choose(index)" v-if=" item.isShow && ( !item.checked || selfList.length < 20 ) ">
						<div class="layui-unselect layui-form-checkbox" :class="item.checked ? 'layui-form-checked' : ''" lay-skin="primary">
							<span>{{item.title}}</span>
							<view class="desc">{{item.desc}}</view>
							<i class="layui-icon layui-icon-ok"></i>
						</div>
					</dd>
				</dl>
			</view>
						
			<input type="text" :value="valueList" :name="name" style="display: none;">
		</div>
	</div>
	
</template>

<script>
	export default {
		name: "singleSelect",
		props: {
			name: {
				default: ''
			},
			list: {
				default: function() {
					return [];
				}
			},
			value: {
				default: ''
			},
			titleKey: { //说明文字的主键
				default: 'title'
			},
			descKey: { //说明文字的主键
				default: 'desc'
			},
			valueKey: { //值的主键
				default: 'value'
			},
			placeholder: {
				default: ''
			},
			showOptions : {
				default : false 
			},
			showDefault : {
				default : true 
			},
			title: {
				default: ''
			},
			emptyTip: { //说明文字的主键
				default: '暂无选项'
			},
		},

		created() {
			this.showPanel = this.showOptions ;
			this.setDefaultValue();
		},
		
		watch: {
			value : function(e){
				this.setDefaultValue();
			},
			list: function() {
				this.setDefaultValue();
			},
			showOptions:function(e){
				this.showPanel = this.showOptions ;
			},
		},

		data() {
			return {
				currentTitle : "" ,
				valueList : [] ,
				selfList : [] , //自行维护的数据
				showPanel : false 
			};
		},

		methods: {
			
			confirmed:function(e){
				this.showPanel = false ;
			},
			
			togglePanel : function(e){
				if (this.showPanel) {
					this.showPanel = false ;
				}else{
					for (var i = 0; i < this.selfList.length; i++) {
						var cur = this.selfList[i] ;
						cur.isShow = true ;
					}
					this.showPanel = true ;
				}
			},
			
			toSearch : function(e){
				var key = e.detail.value ;
				for (var i = 0; i < this.selfList.length; i++) {
					var cur = this.selfList[i] ;
					var currentTitle = cur.title ;
					currentTitle = !!currentTitle ? currentTitle+"" : currentTitle ;
					cur.isShow = !key || (!!currentTitle && currentTitle.search(key) > -1 ) ;
				}
			},
			
			choose: function(index) {
				var cur = this.selfList[index] ;
				for (var i = 0; i < this.selfList.length; i++) {
					var cur = this.selfList[i];
					cur['checked'] = i == index ;
				}
				this.showPanel = false ;
				this.setValueList();
			},

			setDefaultValue: function(e) {
				var currentValue = this.value || "";
				var selfList = [] ;
				for (var i = 0; i < this.list.length; i++) {
					var cur = this.list[i];
					var checked = cur[this.valueKey] == currentValue ;
					if(this.showDefault && i == 0){
						selfList.push({
							title : "请选择" ,
							desc : cur[this.descKey] ? "choose one" : "" ,
							value : "" ,
							checked : currentValue ? false : true,
							isShow : true  
						});
					}
					selfList.push({
						title : cur[this.titleKey] ,
						desc : cur[this.descKey] ,
						value : cur[this.valueKey] ,
						checked : checked ,
						isShow : true 
					});
				}
				this.selfList = selfList ;
				this.setValueList();
			},
			
			setValueList : function(e){
				var valueList = [] ;
				var index = 0 ;
				for (var i = 0; i < this.selfList.length; i++) {
					var cur = this.selfList[i] ;
					if (cur.checked) {
						index = i ;
						valueList.push(cur.value);
						this.currentTitle = cur.title ;
					}
				}
				if(this.valueList[0] == valueList[0]){
					return ;
				}
				this.valueList = valueList ;
				this.$emit("change", {
					index : index ,
					value : this.valueList[0]
				});
			},
		}
	}
</script>

<style scoped>
.layui-input{
	cursor: pointer;
}
.layui-select-title{
	cursor: pointer;
}
.layui-form-checkbox[lay-skin=primary] span{
	color: #000;
}
.desc{
	display: block;
	width: 100%;
	font-size: 12px;
	color: #8799a3;
}
</style>
